<script setup>

</script>

<template>
  <!-- 用户中心页面 -->
  <div class="user-page">
    <!-- 用户中心侧边菜单栏 -->
    <div class="user-slider-menu">
      <!-- 用户中心页面标题 -->
      <div class="user-title">
        <h2>用户中心</h2>
      </div>
      <!-- 用户中心侧边菜单子菜单 -->
      <div class="user-slider-sub-menu">
        <TailSubMenu
            :title-text="'实名认证'"
        >

        </TailSubMenu>
      </div>
    </div>
    <!-- 用户中心页面子级路由展示区域 -->
    <router-view class="user-router-view"></router-view>
  </div>
</template>

<style scoped lang="scss">
/*
 * 用户中心页面
 */
.user-page {
  width: 100%;
  min-height: calc(100vh - var(--top-nav-height));
  display: flex;
  justify-content: flex-start;
  align-items: stretch;

  /*
   * 用户中心侧边菜单栏
   */
  .user-slider-menu {
    width: 20%;
    min-width: max-content;
    background-color: #efefef66;

    /*
     * 用户中心页面标题
     */
    .user-title {
      padding: 1.5rem 1rem;
      user-select: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-family: RJTHFH, serif;
      font-weight: bold;
    }

    /*
     * 用户中心侧边菜单子菜单
     */
    .user-slider-sub-menu {
      border-radius: 0.5rem;
      overflow: hidden;
    }
  }

  /*
   * 用户中心页面子级路由展示区域
   */
  .user-router-view {
    flex: 1;
  }
}
</style>